<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Multiply Alpha</title>
    <style>
      body, html { margin:0; padding:0; }
      #heatmapContainerWrapper { width:1000px; height:1000px; margin:auto; background:rgba(0,0,0,.1); }
      #heatmapContainer { width:100%; height:100%;}
    </style>
    <script src="/build/heatmap.js"></script>
  </head>
  <body>
    <h1>Small Values</h1>
    <div id="heatmapContainerWrapper">  
      <div id="heatmapContainer">

      </div>
    </div>
    <script>

      window.onload = function() {
        var heatmap = h337.create({
          container: document.getElementById('heatmapContainer'),
          opacity:1,
          gradient: {
            '0': 'yellow',
            '1': 'red'
          }
        });
        window.h = heatmap;

        var d = [
                { x: 200, y: 150, value: 1900, radius: 50 },
                { x: 400, y: 150, value: 100, radius: 20 },
                { x: 600, y: 150, value: 10, radius: 10 },
                { x: 800, y: 150, value: 2000, radius: 50 }];
            h.setData({
                min: 1,
                max: 1000000,
                data: d
            });
      
      };
    </script>
  </body>
</html>